<template>
  <div class="flex-c-c-c" style="background: #f2f2f2">
    <div
      style="height: 500px; width: 100%"
      class="flex-c-c-c imgs_back"
      :style="{ backgroundImage: 'url(' + back_img.img + ')' }"
    >
      <!-- <span style="font-size: 30px;color: #FFF;">联系我们</span> -->
      <div
        style="
          border-top: 1px solid #fff;
          font-size: 60px;
          color: #fff;
          height: 100px;
          line-height: 100px;
          margin-top: 15px;
          font-weight: 250;
        "
      >
        {{ back_img.intro }}
      </div>
    </div>
    <div class="flex_divs flex-c-c-c">
      <span style="font-size: 40px; color: #907a6e"> 联系我们 </span>
      <div class="flex-r-b-c" style="margin: 30px 20px">
        <div class="flex-r-b-c" style="width: 50%">
          <img :src="obj.img_one" style="width: 100%; height: 360px" />
        </div>
        <div class="flex-c-b-s" style="width: 47%">
          <div
            style="
              font-size: 16px;
              color: #000000;
              font-weight: 600;
              margin-bottom: 30px;
            "
          >
            <div style="height: 28px; line-height: 28px">总部地址：</div>
            <div style="height: 28px; line-height: 28px">{{ obj.address }}</div>
            <div style="height: 28px; line-height: 28px">
              {{ obj.address2 }}
            </div>
          </div>

          <!-- <span style="font-size:24px;color: #907A6E;margin: 50px 0;">通讯地址： 西藏拉萨市小昭寺路19号</span> -->
          <div style="font-size: 16px; color: #000000; font-weight: 600">
            <div style="height: 28px; line-height: 28px">营销中心：</div>
            <div style="height: 28px; line-height: 28px">
              {{ obj.market_address }}
            </div>
          </div>
        </div>
      </div>
      <div class="flex-r-b-c" style="margin: 30px 0">
        <div class="flex-c-b-s" style="width: 47%">
          <div
            style="
              height: 28px;
              line-height: 28px;
              font-size: 18px;
              color: #000000;
              font-weight: 600;
              margin-bottom: 20px;
            "
          >
            联系我们：
          </div>
          <div
            style="
              height: 28px;
              line-height: 28px;
              font-size: 16px;
              color: #000000;
              font-weight: 600;
              margin-bottom: 22px;
            "
          >
            {{ obj.phone }}&emsp;{{ obj.phone2 }}&emsp;{{ obj.phone3 }}
          </div>
          <div style="font-size: 18px; color: #000000">
            <div
              style="
                height: 28px;
                line-height: 28px;
                font-size: 18px;
                color: #000000;
                font-weight: 600;
                margin-bottom: 18px;
              "
            >
              企业邮箱：
            </div>
            <div
              style="
                height: 28px;
                line-height: 28px;
                font-size: 16px;
                color: #000000;
                font-weight: 600;
                margin-bottom: 20px;
              "
            >
              {{ obj.email }}
            </div>
          </div>
          <!-- <span style="font-size:24px;color: #907A6E;margin: 50px 0;">传    真：   0891-6816173</span>
          <span style="font-size:24px;color: #907A6E;margin-bottom: 50px;">微信平台： xzsh1788</span>
          <span style="font-size:24px;color: #907A6E;">QQ：3176903475 1601932124</span> -->
        </div>
        <div class="flex-r-b-c" style="width: 50%">
          <img :src="obj.img_two" style="width: 100%; height: 360px" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      back_img: {},
      obj: {},
    };
  },
  mounted() {
    let headers = {
      token: this.$md5(this.$key + this.$dataTime()),
      rtimes: this.$dataTime(),
    };
    this.$axios
      .post(this.$base + "/Index/aboutUs", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          this.obj = res.data.data;
        } else {
          Message.error(res.data.msg);
        }
        console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    headers.btype = "abus";
    this.$axios
      .post(this.$base + "/Index/getBg", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          this.back_img = res.data.data;
        } else {
          Message.error(res.data.msg);
        }
        console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    headers.title = "abus";
    this.$axios
      .post(this.$base + "/Index/getWebInfo", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          var link =
            document.querySelector("link[rel*='icon']") ||
            document.createElement("link");
          link.type = "image/x-icon";
          link.rel = "shortcut icon";
          link.href = res.data.data.ico;
          document.title = res.data.data.web_title;
          document.getElementsByTagName("head")[0].appendChild(link);
        } else {
          Message.error(res.data.msg);
        }
        console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
  },
};
</script>

<style scoped>
.imgs_back {
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 1920px 500px;
  background-origin: border-box;
}

.flex_divs {
  width: 65%;
  height: auto;
  padding: 46px 30px 20px 30px;
  margin: 80px 0 40px 0;
  box-shadow: 0px 3px 9px #00000026;
  background-color: #fff;
}
</style>
